import { useState } from "react";
import axios from "axios";
import { InfiniteScroll } from 'antd-mobile'

const App = () => {
  const [list, setList] = useState([]);
  const [pageCode, setPageCode] = useState(1)
  const fetchData = async () => {
    const resp = await axios.get("/xx/room/list", { params: { pageCode } });
    const newList = resp.data.data.list;
    setList(list.concat(newList))
    setPageCode(pageCode + 1)
  };
  // useEffect(() => {
  //   fetchData();
  // }, []);
  return (
    <div>
      <h1>React App</h1>
      {list.map((v) => {
        return (
          <dl key={v.id}>
            <dt>
              <img src={v.url} alt="" width={100} height={100} />
            </dt>
            <dd>
              <h3>{v.title}</h3>
            </dd>
          </dl>
        );
      })}

      <InfiniteScroll loadMore={fetchData}  hasMore={true}></InfiniteScroll>
    </div>
  );
};

export default App;
